<template>
    <div class="right">
        <div class="right-top">
            <span>居民管理</span>
            <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/u178.svg" alt="">
            <span>社区管理</span>
        </div>
        <div class="community">
            <div class="tops">
                <div class="search">
                <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/u251.svg" alt="">
                <input type="text" placeholder="搜索姓名">
                </div>   
                <div class="adds">
                    + 添加社区
                </div>
            </div>
            <ul>
                <li v-for="n in 8" :key="n">
                    <div class="left">
                        <div class="names">四</div>
                        <p class="names1">清波街道劳动路社区嘉禾苑</p>
                        <div class="region">
                            <p class="region1">所属区</p>
                            <p class="region2">光明区</p>
                        </div>
                        <div class="regionq">
                            <p class="regionw">所属区</p>
                            <p class="regione">光明区</p>
                        </div>
                    </div>
                    <div class="right">
                        <span>修改</span>
                        <span>删除</span>
                    </div>
                </li>
            </ul>
        </div>
        
    </div>
</template>

<script>

export default {
    components:{

    }
}
</script>

<style lang="scss" scoped>
.right{
    width: 100%;
    height: 874px;
    padding: 0 12px;
    box-sizing: border-box;
    .right-top{
        height: 44px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        span{
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            color: #333;
        }
        span:nth-of-type(1){
            color: #8c8c8c;
        }
        img{
            width: 7px;
            height: 14px;
            margin: 0 5px;
        }
    }
    .community{
        width: 100%;
        height: 818px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 4px;
        box-shadow: 0px 3px 6px rgba(126, 134, 142, 0.156862745098039);
        padding: 0 15px;
        box-sizing: border-box;
        .tops{
            width: 100%;
            height: 80px;
            // line-height: 80px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .search{
                height: 80px;
                position: relative;
                display: flex;
                align-items: center;
                input{
                    display: block;
                    width: 250px;
                    height: 32px;
                    padding-left: 32px;
                    border: none;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    margin-left: 5px;
                    outline: none;
                }
                img{
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    top: 31px;
                    left: 20px;
                    z-index: 1;
                }
            }
            .adds{
                width: 88px;
                height: 32px;
                background: #007fff;
                font-size: 12px;
                text-align: center;
                line-height: 32px;
                color: #fff;
                border-radius: 4px;
                margin-right: 5px;
            }
        }
        ul{
            width: 100%;
            list-style: none;
            li{
                width: 100%;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: url("https://cdn7.axureshop.com/demo2024/2281499/images/%E7%A4%BE%E5%8C%BA%E7%AE%A1%E7%90%86/bg_u1180.svg") no-repeat;
                .left{
                    width: 80%;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    .names{
                        width: 48px;
                        height: 48px;
                        line-height: 48px;
                        text-align: center;
                        background: #007fff;
                        border-radius: 4px;
                        font-size: 18px;
                        color: #fff;
                        margin-left: 20px;
                        margin-right: 15px;
                    }
                    .names1{
                        width: 400px;
                        height: 80px;
                        line-height: 80px;
                        font-size: 14px;
                        color: #171a1d;
                        white-space: nowrap; /* 不换行 */
                        overflow: hidden; /* 隐藏超出的内容 */
                        text-overflow: ellipsis;
                    }
                    .region{
                        width: 200px;
                        height: 80px;
                        text-align: center;
                        .region1{
                            height: 40px;
                            line-height: 50px;
                            color: #171a1d7a;
                            font-size: 14px;
                        }
                        .region2{
                            height: 40px;
                            line-height: 30px;
                            font-size: 14px;
                        }
                    }
                    .regionq{
                        width: 200px;
                        height: 80px;
                        text-align: center;
                        .regionw{
                            height: 40px;
                            line-height: 50px;
                            color: #171a1d7a;
                            font-size: 14px;
                        }
                        .regione{
                            height: 40px;
                            line-height: 30px;
                            font-size: 14px;
                        }
                    }
                }
                .right{
                    width: 15%;
                    height: 80px;
                    display: flex;
                    // align-items: center;
                    justify-content: right;
                    span:nth-of-type(1){
                        height: 80px;
                        line-height: 80px;
                        font-size: 14px;
                        color: #007fff;
                        padding-right: 30px;
                    }
                    span:nth-of-type(2){
                        height: 80px;
                        line-height: 80px;
                        font-size: 14px;
                        color: #ff3d00;
                        padding-right: 30px;
                    }
                }
            }
        }
    }
}
</style>